<template>
  <section class="animate-container" ref="animate-container">
    <canvas></canvas>
  </section>
</template>

<script>
  const oneDeg = 0.2;
  const ang = oneDeg * Math.PI / 180;


  export default {
    name: 'header-animate',
    data() {
      return {
        canvas: null,
        context: null,
        nowtime: null,
        radius: [250, 230, 210, 190, 170]
      }
    },
    mounted() {
      this.canvas = document.getElementsByTagName("canvas")[0];
      this.context = this.canvas.getContext("2d");
      this.init();
      window.addEventListener("resize",()=>{
        this.init()
      })
      this.updateAnimate();
    },
    methods: {
      init() {
        this.canvas.width = this.$refs["animate-container"].clientWidth;
        this.canvas.height = 600;
        this.context.translate(this.canvas.width / 2, 0);
      },
      drawRoad(radius = 300) {
        let road = new Path2D();
        road.arc(0, 0, radius, 0, 2 * Math.PI)
        this.context.strokeStyle = '#E0E0E0';
        this.context.stroke(road);
      },
      drawStar(position = 250, radius = 4) {
        let star = new Path2D();
        this.context.rotate(2);
        star.arc(position, 0, radius, 0, 2 * Math.PI);
        this.context.fillStyle = '#E0E0E0';
        this.context.fill(star);
      },
      draw() {
        this.context.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height); // clear

        this.context.rotate(ang);
        this.context.save();
        this.radius.forEach(r => {
          this.drawRoad(r);
          this.drawStar(r);
        });
        this.context.restore();
        window.requestAnimationFrame(this.draw)
      },
      updateAnimate() {
        this.draw()
      }
    }
  }

</script>

<style scoped>
  section.animate-container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }

</style>
